<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Percentage Recalculator</title>
  <style>
* {
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f5f5f5;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.percentage-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.percentage-row label {
  font-weight: bold;
  margin-right: 10px;
  min-width: 120px;
}

.percentage-row input[type="number"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 15px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  min-width: 120px;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

.checkbox-container span {
  color: #666;
  font-size: 14px;
}

.results {
  margin-top: 30px;
  padding: 20px;
  background-color: #e8f4f8;
  border-radius: 5px;
  border-left: 4px solid #2196F3;
}

.results h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 15px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.result-row:last-child {
  border-bottom: none;
}

.result-label {
  font-weight: bold;
}

.result-value {
  font-size: 16px;
  color: #2196F3;
}

.ignored {
  opacity: 0.5;
  text-decoration: line-through;
}

.total-row {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #2196F3;
  font-weight: bold;
  font-size: 18px;
}
  </style>
</head>
<body>
  <div class="container">
    <h1>Percentage recalculator</h1>
    
    <div class="percentage-row">
      <label>Percentage 1:</label>
      <input type="number" id="percent1" step="0.01" min="0" max="100" placeholder="Enter percentage">
      <div class="checkbox-container">
        <input type="checkbox" id="ignore1">
        <span>Ignore this</span>
      </div>
    </div>
    
    <div class="percentage-row">
      <label>Percentage 2:</label>
      <input type="number" id="percent2" step="0.01" min="0" max="100" placeholder="Enter percentage">
      <div class="checkbox-container">
        <input type="checkbox" id="ignore2">
        <span>Ignore this</span>
      </div>
    </div>
    
    <div class="percentage-row">
      <label>Percentage 3:</label>
      <input type="number" id="percent3" step="0.01" min="0" max="100" placeholder="Enter percentage">
      <div class="checkbox-container">
        <input type="checkbox" id="ignore3">
        <span>Ignore this</span>
      </div>
    </div>
    
    <div class="percentage-row">
      <label>Percentage 4:</label>
      <input type="number" id="percent4" step="0.01" min="0" max="100" placeholder="Enter percentage">
      <div class="checkbox-container">
        <input type="checkbox" id="ignore4">
        <span>Ignore this</span>
      </div>
    </div>
    
    <div class="results" id="results">
      <h2>Recalculated percentages</h2>
      <div id="resultContent">
        Enter percentages above to see recalculated values.
      </div>
    </div>
  </div>

  <script type="module">
function calculatePercentages() {
  const percentages = [];
  const ignored = [];
  
  // Collect all percentages and their ignore status
  for (let i = 1; i <= 4; i++) {
    const value = parseFloat(document.getElementById(`percent${i}`).value);
    const isIgnored = document.getElementById(`ignore${i}`).checked;
    
    if (!isNaN(value)) {
      percentages.push({
        index: i,
        value: value,
        ignored: isIgnored
      });
    }
  }
  
  // Filter out ignored percentages for calculation
  const activePercentages = percentages.filter(p => !p.ignored);
  
  // Calculate total of active percentages
  const total = activePercentages.reduce((sum, p) => sum + p.value, 0);
  
  // Generate results HTML
  let resultHTML = '';
  
  if (percentages.length === 0) {
    resultHTML = 'Enter percentages above to see recalculated values.';
  } else {
    percentages.forEach(p => {
      const rowClass = p.ignored ? 'result-row ignored' : 'result-row';
      let recalculatedValue = '';
      
      if (p.ignored) {
        recalculatedValue = `${p.value}% (ignored)`;
      } else if (total === 0) {
        recalculatedValue = '0%';
      } else {
        const recalculated = (p.value / total) * 100;
        recalculatedValue = `${recalculated.toFixed(2)}%`;
      }
      
      resultHTML += `
        <div class="${rowClass}">
          <span class="result-label">Percentage ${p.index}:</span>
          <span class="result-value">${recalculatedValue}</span>
        </div>
      `;
    });
    
    // Add total row
    resultHTML += `
      <div class="result-row total-row">
        <span class="result-label">Total of active percentages:</span>
        <span class="result-value">${total.toFixed(2)}%</span>
      </div>
    `;
    
    if (activePercentages.length > 0 && total !== 100) {
      resultHTML += `
        <div class="result-row">
          <span class="result-label">Recalculated total:</span>
          <span class="result-value">100%</span>
        </div>
      `;
    }
  }
  
  document.getElementById('resultContent').innerHTML = resultHTML;
}

// Add event listeners to all inputs and checkboxes
for (let i = 1; i <= 4; i++) {
  document.getElementById(`percent${i}`).addEventListener('input', calculatePercentages);
  document.getElementById(`ignore${i}`).addEventListener('change', calculatePercentages);
}

// Initial calculation
calculatePercentages();
  </script>
</body>
</html>
